<template>
  <div class="table-data-div" v-show="showHideBool" :class="isSpatialDataBool?'table-data-div-min':'table-data-div-max'">
    <div class="table-data-header">{{ currentLayerName }}数据</div>
    <div class="table-data-closer" @click="hideTableDiv"></div>
    <!--数据信息表格-->
    <div style="width:100%;">
      <!--储气罐-->
      <el-table v-if="currentLayerCode=='1'" :data="allTableDataList" :height="tableHeight" stripe :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}" style="width: 100%">
        <el-table-column v-for="col of cqgColumns" :key="col.prop" :prop="col.prop" :label="col.label"
                         :formatter="(row, column) => dictChange(row, column, '1')" show-overflow-tooltip></el-table-column>
      </el-table>
      <!--重点场所-->
      <el-table v-if="currentLayerCode=='2'" :data="allTableDataList" :height="tableHeight" stripe :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}" style="width: 100%">
        <!--<el-table-column v-for="col of zdcsColumns" :key="col.prop" :prop="col.prop" :label="col.label"
                         :formatter="(row, column) => dictChange(row, column, '2')" show-overflow-tooltip></el-table-column>-->
        <el-table-column property="ssNumber" label="建筑物编号" width="170"></el-table-column>
        <el-table-column property="ssProvince" label="省" width="140"></el-table-column>
        <el-table-column property="ssCity" label="市" width="140"></el-table-column>
        <el-table-column property="ssCounties" label="区（县）" width="140"></el-table-column>
        <el-table-column property="ssLongitude" label="经度" width="120"></el-table-column>
        <el-table-column property="ssLatitude" label="纬度" width="120"></el-table-column>
        <el-table-column property="ssJglx" label="结构类型" width="200"></el-table-column>
        <el-table-column property="ssJzwmc" label="建筑物名称" width="200"></el-table-column>
        <el-table-column property="ssJznd" label="建造年代" width="100"></el-table-column>
        <el-table-column property="ssCs" label="层数" width="80"></el-table-column>
        <el-table-column property="ssCg" label="层高" width="80"></el-table-column>
        <el-table-column property="ssYt" label="用途" width="100"></el-table-column>
        <el-table-column property="ssPlmgzcd" label="平立面规则程度" width="240"></el-table-column>
        <el-table-column property="ssSfbz" label="设防标准" width="160"></el-table-column>
        <el-table-column property="ssWglb" label="屋盖类别" width="100"></el-table-column>
        <el-table-column property="ssZp" label="* 照片" width="100">
          <template #default="scope">
            <el-link v-if="scope.row.ssZp==null || scope.row.ssZp==''" type="primary" @click="handleUplodePic1(scope.row)">上传图片</el-link>
            <el-link v-else type="primary" @click="handleUplodePic1(scope.row)">查看</el-link>
          </template>
        </el-table-column>
        <el-table-column property="ssSgt" label="施工图" width="100">
          <template #default="scope">
            <el-link v-if="scope.row.ssSgt==null || scope.row.ssSgt==''" type="primary" @click="handleUplodePic2(scope.row)">上传图片</el-link>
            <el-link v-else type="primary" @click="handleUplodePic2(scope.row)">查看</el-link>
          </template>
        </el-table-column>
        <el-table-column property="ssXfjhpsj" label="小飞机航拍数据/卫星图片" width="200">
          <template #default="scope">
            <el-link v-if="scope.row.ssXfjhpsj==null || scope.row.ssXfjhpsj==''" type="primary" @click="handleUplodePic3(scope.row)">上传图片</el-link>
            <el-link v-else type="primary" @click="handleUplodePic3(scope.row)">查看</el-link>
          </template>
        </el-table-column>
        <el-table-column property="ssJzgztd" label="建构造特点" width="100"></el-table-column>
        <el-table-column property="ssDwmjzj" label="单位面积造价" width="140"></el-table-column>
        <el-table-column property="ssBz" label="备注" width="200"></el-table-column>
      </el-table>
      <!--查看上传图片-->
      <el-dialog v-model="openPic1" width="500px" title="上传照片" append-to-body>
        <p class="mt15"></p>
        <div>
          <image-upload ref="imageUploadRef1" :limit="5" v-model="attach1" />
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="savePic1">确定</el-button>
            <el-button type="primary" @click="openPic1 = false">取消</el-button>
          </div>
        </template>
      </el-dialog>
      <el-dialog v-model="openPic2" width="500px" title="上传施工图" append-to-body>
        <p class="mt15"></p>
        <div>
          <image-upload ref="imageUploadRef2" :limit="5" v-model="attach2" />
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="savePic2">确定</el-button>
            <el-button type="primary" @click="openPic2 = false">取消</el-button>
          </div>
        </template>
      </el-dialog>
      <el-dialog v-model="openPic3" width="500px" title="上传小飞机航拍数据/卫星图片" append-to-body>
        <p class="mt15"></p>
        <div>
          <image-upload ref="imageUploadRef3" :limit="5" v-model="attach3" />
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="savePic3">确定</el-button>
            <el-button type="primary" @click="openPic3 = false">取消</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { uploadSave, getFileData } from '@/api/security/dataView.js'

export default {
  name: "CqgdataTable",
  components: {

  },
  props:{
    allTableDataBool: {//是否显示表格面板
      type:Boolean,
      required:true,
      default:false
    },
    isSpatialDataBool: {//是否空间数据
      type:Boolean,
      required:true,
      default:false
    },
    currentLayerName: {//当前数据类型name
      type:String,
      required:true,
      default:""
    },
    currentLayerCode: {//当前数据类型code
      type:String,
      required:true,
      default:""
    },
    allTableDataList: {//查询图层表格数据列表
      type:Array,
      required:true,
      default:[]
    },
  },
  emits:[],
  data() {
    return {
      //显示隐藏表格面板
      showHideBool:false,
      //表格高度
      tableHeight:130,
      //储气罐
      cqgColumns: [
        //{ prop: 'gaId',label: '主键ID' },
        { prop: 'province',label: '省（市、 区）' },
        { prop: 'city',label: '市（州、 盟）' },
        { prop: 'county',label: '县（市、 区、 旗）' },
        { prop: 'gaNumber',label: '编号' },
        { prop: 'gaName',label: '储气罐名称' },
        { prop: 'gaLongitude',label: '经度' },
        { prop: 'gaLatitude',label: '纬度' },
        { prop: 'gaXh',label: '型号' },
        { prop: 'gaGcrj',label: '公称容积' },
        { prop: 'gaGzyl',label: '工作压力' },
        { prop: 'gaTtnj',label: '筒体内径' },
        { prop: 'gaTtgd',label: '筒体高度' },
        { prop: 'gaTtftbh',label: '筒体、封头壁厚' },
        { prop: 'gaCkzl',label: '参考重量' },
        { prop: 'gaJgcl',label: '结构材料' },
        { prop: 'gaDgcd',label: '导轨长度' },
        { prop: 'gaDggd',label: '导轨高度' },
        { prop: 'gaDgzfhd',label: '导轨中腹厚度' },
        { prop: 'gaJcxs',label: '基础形式' },
        { prop: 'gaClxh',label: '材料型号' },
        { prop: 'gaTxml',label: '弹性模量' },
        { prop: 'gaQfyl',label: '屈服应力' },
        { prop: 'gaXyyl',label: '许用应力' },
        { prop: 'gaCdlb',label: '场地类别' },
        { prop: 'gaLdsyhcd',label: '6度时液化程度' },
        { prop: 'gaQdsyhcd',label: '7度时液化程度' },
        { prop: 'gaBdsyhcd',label: '8度时液化程度' },
        { prop: 'gaJdsyhcd',label: '9度时液化程度' },
        { prop: 'gaLdszxcd',label: '6度时震陷程度' },
        { prop: 'gaQdszxcd',label: '7度时震陷程度' },
        { prop: 'gaBdszxcd',label: '8度时震陷程度' },
        { prop: 'gaJdszxcd',label: '9度时震陷程度' },
        { prop: 'gaJsnd',label: '建设年代' },
        { prop: 'gaSfld',label: '设防烈度' },
      ],
      //重点场所
      zdcsColumns: [
        //{ prop: 'Id',label: '主键ID' },
      ],
      //查看图片
      openPic1:false,
      openPic2:false,
      openPic3:false,
      attach1: [],
      attach2: [],
      attach3: [],
      selectRowId:null,//选择行id
    }
  },
  watch: {
    allTableDataBool: {//是否显示表格面板
      handler: function(newVal,oldVal){
        if(newVal!=oldVal){
          this.showHideBool = newVal;
        }
      },
      immediate:true
    },
    isSpatialDataBool: {//是否空间数据
      handler: function(newVal,oldVal){
        if(newVal!=oldVal){
          //设置表格高度
          if(newVal){
            this.tableHeight = 130;
          }else{
            this.tableHeight = 330;
          }
        }
      },
      immediate:true
    },
    currentLayerName: {//当前数据类型name
      handler: function(newVal,oldVal){
        if(newVal!=oldVal){

        }
      },
      immediate:true
    },
    currentLayerCode: {//当前数据类型code
      handler: function(newVal,oldVal){
        if(newVal!=oldVal){

        }
      },
      immediate:true
    },
    allTableDataList: {//查询图层表格数据列表
      handler: function(newVal,oldVal){
        if(newVal!=oldVal){

        }
      },
      immediate:true
    },
  },
  mounted() {

  },
  methods: {
    //隐藏表格面板
    hideTableDiv(){
      this.showHideBool = false;
    },
    //字段解析数据显示
    dictChange(data, element, dictName) {
      const col = element.property;
      const dictArr = this.getDictArray(dictName,col);
      if (dictArr!=null && dictArr.length>0) {
        for (let item of dictArr) {
          if (item.code === data[col]) {
            return item.name;
          }
        }
      }

      return data[col];
    },
    //获取字典数组
    getDictArray(dictName,colName){
      let array = null;
      if(dictName=="1"){//储气罐
        array = [];
      }else if(dictName=="2"){//重点场所
        array = [];
      }else if(dictName=="whqy1"){//危化企业
        if(colName="typeHazardousChemicals"){//危化品类型
          array = [
            { code:"1",name:"爆炸品" },
            { code:"2",name:"压缩气体和液化气体" },
            { code:"3",name:"易燃液体" },
            { code:"4",name:"易燃固体、自然物品和遇湿易燃物品" },
            { code:"5",name:"氧化物和有机氧化物" },
            { code:"6",name:"有毒品" },
            { code:"7",name:"放射性物品" },
            { code:"8",name:"腐蚀品" },
          ];
        }
      }

      return array;
    },
    // 上传照片
    handleUplodePic1 (row) {
      this.selectRowId = row.ssId;
      getFileData(row.ssId).then(res => {
        console.log(res.data);
        this.attach1 = res.data.zplist ? res.data.zplist : [];
        this.openPic1 = true;
      })
    },
    // 上传施工图
    handleUplodePic2 (row) {
      this.selectRowId = row.ssId;
      getFileData(row.ssId).then(res => {
        console.log(res.data);
        this.attach2 = res.data.sgtlist ? res.data.sgtlist : [];
        this.openPic2 = true;
      })
    },
    // 上传小飞机航拍数据/卫星图片
    handleUplodePic3 (row) {
      this.selectRowId = row.ssId;
      getFileData(row.ssId).then(res => {
        console.log(res.data);
        this.attach3 = res.data.xfjlist ? res.data.xfjlist : [];
        this.openPic3 = true;
      })
    },
    // 保存照片
    savePic1 () {
      const fileList = JSON.parse(JSON.stringify(this.$refs["imageUploadRef1"].fileList));
      const attachIds = [];
      for (let i = 0; i < fileList.length; i++) {
        attachIds.push(fileList[i].attachId)
      }
      const ids = attachIds.join(",");
      //保存图片
      uploadSave({ photoId: ids, ssId: this.selectRowId, photoType: "1" }).then(res => {
        this.$modal.msgSuccess("保存成功");
        this.openPic1 = false;
      })
    },
    // 保存施工图
    savePic2 () {
      const fileList = JSON.parse(JSON.stringify(this.$refs["imageUploadRef2"].fileList));
      const attachIds = [];
      for (let i = 0; i < fileList.length; i++) {
        attachIds.push(fileList[i].attachId)
      }
      const ids = attachIds.join(",");
      //保存图片
      uploadSave({ photoId: ids, ssId: this.selectRowId, photoType: "2" }).then(res => {
        this.$modal.msgSuccess("保存成功");
        this.openPic2 = false;
      })
    },
    // 保存小飞机航拍数据/卫星图片
    savePic3 () {
      const fileList = JSON.parse(JSON.stringify(this.$refs["imageUploadRef3"].fileList));
      const attachIds = [];
      for (let i = 0; i < fileList.length; i++) {
        attachIds.push(fileList[i].attachId)
      }
      const ids = attachIds.join(",");
      //保存图片
      uploadSave({ photoId: ids, ssId: this.selectRowId, photoType: "3" }).then(res => {
        this.$modal.msgSuccess("保存成功");
        this.openPic3 = false;
      })
    },
  }
}
</script>
<style scoped>
.table-data-div {
  position:absolute;left:0px;bottom:0px;width: 100%;background:#fff;padding:20px;z-index: 100;border-top: 1px solid #e5ebf7;
}

.table-data-div-max {
  height:400px;
}
.table-data-div-min {
  height:200px;
}

.table-data-header {
  background: #e5ebf7;color:#107ce5;border-bottom:1px solid #107ce5;width: fit-content;font-size: 16px;margin-bottom: 10px;padding: 8px 16px;
}

.table-data-closer {
  text-decoration: none;
  position: absolute;
  top: 20px;
  right: 20px;
  color:#68798b;
}
.table-data-closer:after {
  content: "✖";
}
</style>